<template>
	<div>
<van-pull-refresh v-model="refreshLoad" @refresh="onRefresh" :style="refreshStyle">
			
		
		<van-nav-bar left-arrow @click-left="backUp">
			<template #right>
				<van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect"
					placement="bottom-end">
					<template #reference>
						<van-icon name="wap-nav" size="18" />
					</template>
				</van-popover>
			</template>
			<template #title>


				<span style="font-size: 20px;font-weight: bold;color: blue;">{{currentDir}}</span>


			</template>

		</van-nav-bar>
	
		<van-swipe-cell v-for="(item,index) in files" :key="index">
			<van-cell size="large" :is-link="item.type==0?true:false" :value="item.updateTime" @click="openFile(index)">
				<template #icon>
					<van-icon :name="item.type==0?'/img/dir.png':'/img/file.png'" size="22" />
				</template>

				<template #title>
					<span style="font-size: 15px;padding-left: 5%;"
						:title="item.fileName">{{item.fileName.length>10?item.fileName.substring(0,10)+'...':item.fileName}}</span>
				</template>
			</van-cell>
			<template #right>
				<van-button square type="info" text="重命名" @click="renameFile(index)" />
				<van-button square type="primary" text="查看详情" @click="getFile(index)" />
				<van-button square type="danger" text="删除" @click="deleteFile(index)" />
			</template>
		</van-swipe-cell>
		<van-dialog v-model="dialogShow" :title="dialogTitle" show-cancel-button @confirm="fileConfirm()"
			@cancel="fileCancel()" :before-close="fileBeforeClose">
			<van-cell-group>
				<van-field v-model="inputFileText" :placeholder="dialogPlaceholder" />
			</van-cell-group>
		</van-dialog>

		<van-dialog v-model="deleteDialogShow" :title="deleteDialogTitle" show-cancel-button
			@confirm="deleteFileConfirm()">

		</van-dialog>

		<van-dialog v-model="renameShow" title="重命名" show-cancel-button @confirm="renameFileConfirm()"
			:before-close="renameFileBeforeClose">
			<van-cell-group>
				<van-field v-model="renameInputText" placeholder="请输入新名称" />
			</van-cell-group>
		</van-dialog>


		<van-popup v-model="uploadShow" style="height: 90%;margin-top:-5%; width: 90%;" :close-on-click-overlay="false">
			<Upload :suffix="currentDir" v-if="uploadShow" ref="uploadObj"></Upload>

			<div style="height: 100px;

margin-left: 43%;

position: fixed;

bottom: 0;">

				<van-button type="danger" @click="closePopup()">关闭</van-button>
			</div>
		</van-popup>

		<van-popup v-model="fileInfoShow" style="height: 90%;margin-top:-5%; width: 90%;"
			:close-on-click-overlay="true">
			<div>
				<div style="text-align: center;padding-top: 10%; font-size: 25px;">
					{{files.length>0?files[fileInfoIndex].fileName:""}}
				</div>

			</div>

			<div style="text-align: center; padding-top: 2%;">
				<p v-show='files.length>0?(files[fileInfoIndex].type==1?true:false):false'>
					文件大小：{{files.length>0?convertByte(files[fileInfoIndex].fileSize):""}}</p>
				<p>文件类型：{{files.length>0?(files[fileInfoIndex].type==0?"文件夹":"文件"):""}}</p>
				<p>创建时间：{{files.length>0?files[fileInfoIndex].updateTimeAll:""}}</p>
				<a v-show='files.length>0?(files[fileInfoIndex].type==1?true:false):false' :href="downloadUrl">下载文件</a>
			</div>
			<div style="height: 100px;

margin-left: 43%;

position: fixed;

bottom: 0;">

				<van-button type="danger" @click="closeFileInfo()">关闭</van-button>
			</div>
		</van-popup>
		<van-overlay :show="overlayShow">

		</van-overlay>
		
		</van-pull-refresh>	
	</div>
</template>

<script>
	import preventBack from 'vue-prevent-browser-back'; //组件内单独引入
	import Upload from '../../../compoents/upload.vue';
	import common from '../../../js/common.js'
	export default {
		components: {
			Upload
		},
		mixins: [preventBack], //注入  阻止返回上一页
		data() {
			return {
refreshLoad:true,
				renameInputText: "",
				renameShow: false,
				renameIndex: "",
				downloadUrl: "",
				fileInfoShow: false,
				fileInfoIndex: 0,
				uploadShow: false,
				uploadTitle: "",
				deleteDialogShow: false,
				deleteDialogTitle: "",
				deleteFileIndex: "",
				overlayShow: false,
				dialogShow: false,
				dialogTitle: "",
				dialogPlaceholder: "",
				actions: [{
						text: '新建目录'
					},
					{
						text: '新建文件'
					},
					{
						text: '上传'
					},
					{
						text: '关于'
					}
				],
				showPopover: false,
				currentDir: "/",
				inputFileText: "",
				files: [],
				selType: 0,
				clickValue: 0,
				time: true,
				refreshStyle:{height: 'auto',overflowY:'auto'}

			}
		},
		mounted() {
			//this.downloadUrl=common.BASE_URL+'/netDisk/downloadFile'
			console.log(document.documentElement.clientHeight)
			this.refreshStyle.height=document.documentElement.clientHeight+'px'
			this.loadFiles();
		},

		methods: {
			onRefresh(){
				console.log("---")
				this.loadFiles('refresh');
			},
			renameFileConfirm() {
				if (this.renameInputText == '') {
					this.$toast({
						type: 'fail',
						message: '请输入新名称'
					});
					return;
				}
				if (this.checkFileNameByIndex()) {
					this.$toast({
						type: 'fail',
						message: '新名称重复'
					});
					return;
				}
				this.overlayShow = true
				this.$http.get('/netDisk/renameFile?suffix=' + (this.currentDir == '/' ? '' : this.currentDir) +
					'&oldName=' +
					this.files[this.renameIndex].fileName + '&newName=' + this.renameInputText).then(res => {
					if (res.data.data) {
						// this.$toast({
						// 	type: 'success',
						// 	message: '创建目录成功'
						// });
					} else {
						this.$toast({
							type: 'fail',
							message: '操作失败'
						});
					}
					this.renameInputText = ''
					this.overlayShow = false
					this.loadFiles()
				})
			},
			convertByte(data) {
				let str = data + " B";
				if (data > 1024) {
					str = (data / 1024).toFixed(2) + " KB"
				}
				if (data > 1024 * 1024) {
					str = (data / 1024 / 1024).toFixed(2) + " MB"
				}
				if (data > 1024 * 1024 * 1024) {
					str = (data / 1024 / 1024 / 1024).toFixed(2) + " GB"
				}
				return str;
			},
			closeFileInfo() {
				this.fileInfoShow = false;
				this.loadFiles()
			},
			renameFile(index) {
				this.renameIndex = index;
				this.renameShow = true;
			},
			getFile(index) {
				this.downloadUrl = common.BASE_URL + '/netDisk/downloadFile' + "?suffix=" + (this.currentDir == '/' ? '' :
					this.currentDir) + '/' + this.files[index].fileName + "&authKey=" + localStorage.getItem("key")
				this.fileInfoIndex = index
				this.fileInfoShow = true;
			},
			closePopup() {
				console.log(this.$refs.uploadObj.uploadStatus)
				if (this.$refs.uploadObj.uploadStatus) {
					this.$toast({
						type: 'fail',
						message: '文件正在上传'
					});
				} else {
					this.uploadShow = false
					this.loadFiles()
				}
			},
			checkFileName() {
				for (let i = 0; i < this.files.length; i++) {
					if (this.files[i].fileName == this.inputFileText) {
						return true
					}

				}
				return false
			},
			checkFileNameByIndex() {
				for (let i = 0; i < this.files.length; i++) {
					if (i != this.renameIndex) {
						if (this.files[i].fileName == this.renameInputText) {
							return true
						}
					}
				}
				return false
			},
			deleteFileConfirm() {
				this.overlayShow = true
				this.$http.get('/netDisk/deleteFile?suffix=' + ((this.currentDir == '/' ? '' : this.currentDir) + '/' +
					this.files[this.deleteFileIndex].fileName)).then(res => {
					if (res.data.data) {
						// this.$toast({
						// 	type: 'success',
						// 	message: '创建目录成功'
						// });
					} else {
						this.$toast({
							type: 'fail',
							message: '操作失败'
						});
					}

					this.overlayShow = false
					this.loadFiles()
				})
			},
			deleteFile(index) {
				this.deleteFileIndex = index
				let fileElement = this.files[index];
				if (fileElement.type == 0) {
					this.deleteDialogTitle = '确定删除' + fileElement.fileName + "的目录吗?"
				} else {
					this.deleteDialogTitle = '确定删除' + fileElement.fileName + "的文件吗?"
				}
				this.deleteDialogShow = true;
			},
			fileBeforeClose(action, done) {
				console.log(action, done)
				if (action == 'confirm') {
					if (this.inputFileText == '') {
						done(false)
					} else if (this.checkFileName()) {
						done(false)
					} else {
						done()
					}
				} else {
					done()
				}
			},
			renameFileBeforeClose(action, done) {
				console.log(action, done)
				if (action == 'confirm') {
					if (this.renameInputText == '') {
						done(false)
					} else if (this.checkFileNameByIndex()) {
						done(false)
					} else {
						done()
					}
				} else {
					done()
				}
			},
			fileConfirm() {
				if (this.selType == 0) {
					if (this.inputFileText == '') {
						this.$toast({
							type: 'fail',
							message: '请输入目录名称'
						});
						return;
					}
					if (this.checkFileName()) {
						this.$toast({
							type: 'fail',
							message: '该目录名称已存在'
						});
						return;
					}
					this.createDir()
				} else {
					if (this.inputFileText == '') {
						this.$toast({
							type: 'fail',
							message: '请输入文件名称'
						});
						return;
					}
					if (this.checkFileName()) {
						this.$toast({
							type: 'fail',
							message: '该文件名称已存在'
						});
						return;
					}
					this.createFile()
				}
			},
			fileCancel() {

			},
			onSelect(action) {
				console.log(action)
				if (action.text == '新建目录') {
					this.dialogTitle = action.text
					this.dialogShow = true
					this.dialogPlaceholder = "请输入目录名称"
					this.selType = 0

				} else if (action.text == '新建文件') {
					this.dialogTitle = action.text
					this.dialogShow = true
					this.dialogPlaceholder = "请输入文件名称"
					this.selType = 1
				} else if (action.text == '上传') {
					this.uploadShow = true;
				}else if (action.text == '关于') {
					window.open('/#/about')
				}
			},
			createDir() {
				this.overlayShow = true
				this.$http.get('/netDisk/createDir?suffix=' + ((this.currentDir == '/' ? '' : this.currentDir) + '/' + this
					.inputFileText)).then(res => {
					if (res.data.data) {
						this.$toast({
							type: 'success',
							message: '创建目录成功'
						});
					} else {
						this.$toast({
							type: 'fail',
							message: '创建目录失败'
						});
					}
					this.inputFileText = ''
					this.overlayShow = false
					this.loadFiles()
				})
			},
			createFile() {
				this.overlayShow = true
				this.$http.get('/netDisk/createFile?suffix=' + ((this.currentDir == '/' ? '' : this.currentDir) + '/' +
					this.inputFileText)).then(res => {
					if (res.data.data) {
						this.$toast({
							type: 'success',
							message: '创建文件成功'
						});
					} else {
						this.$toast({
							type: 'fail',
							message: '创建文件失败'
						});
					}
					this.inputFileText = ''
					this.overlayShow = false
					this.loadFiles()
				})
			},
			loadFiles(data) {
				if(data=='refresh'){
					this.refreshLoad=true
					}
				//this.overlayShow = true
				this.$http.get('/netDisk/getFiles?suffix=' + (this.currentDir == '/' ? '' : this.currentDir)).then(res => {
					this.files = res.data.data;
					//this.overlayShow = false
					if(data=='refresh'){
						this.$toast({
							type: 'success',
							message: '刷新成功'
						});
						this.refreshLoad=false
					}
				})


			},
			openFile(index) {
				this.clickValue++;
				if (this.clickValue == 2) {
					if (this.files[index].type == 1) {
						this.$toast({
							type: 'fail',
							message: '暂不支持打开文件'
						});
					}
					this.clickValue = 0;
					this.time = false;
				} else {
					this.time = true;
				}

				setTimeout(function(that) {
					if (that.time) {
						if (that.files[index].type == 0) {
							if (that.currentDir.charAt(that.currentDir.length - 1) == '/') {
								that.currentDir = that.currentDir + that.files[index].fileName;
							} else {
								that.currentDir = that.currentDir + '/' + that.files[index].fileName;
							}

                            that.fileInfoIndex=0
							that.loadFiles()
						}
						that.clickValue = 0;
					}
				}, 200, this)





			},
			backUp() {
				if (this.currentDir == '/') {
					this.$toast({
						type: 'fail',
						message: '已是顶层目录'
					});
					return;
				}
				let index = this.currentDir.lastIndexOf('/')
				this.currentDir = this.currentDir.substring(0, index)
				if (this.currentDir.length == 0) {
					this.currentDir = '/'
				}
				this.fileInfoIndex=0
				this.loadFiles()
			}
		}
	}
</script>

<style>

</style>
